<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
	href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style type="text/css">
/*左侧菜单*/
.sidebar-menu {
	border-right: 1px solid #c4c8cb;
}
/*一级菜单*/
.menu-first {
	border-top: 1px solid #efefef;
	padding: 4px 0 4px 0;
	font-size: 1.5em;
	font-weight: normal;
	display: block;
}
/*一级菜单鼠标划过状态*/
.menu-first:hover {
	text-decoration: none;
	background-color: #d6d4d5;
	border-top: 1px solid #b7b7b7;
}
/*二级菜单*/
.menu-second li a {
	padding: 2px 0 2px 1.2em;
	font-size: 1.2em;
}
/*二级菜单鼠标划过样式*/
.menu-second li a:hover {
	text-decoration: none;
	background-color: #d6d4d5;
}
/*二级菜单选中状态*/
.menu-second-selected {
	background-color: #66c3ec;
	height: 31px;
	line-height: 31px;
	text-align: center;
}

</style>

</head>
<body>
</body>
<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			<nav class="navbar navbar-default" role="navigation">
				<div class="navbar-header">

					<button type="button" class="navbar-toggle" data-toggle="collapse"
						data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">Toggle navigation</span><span
							class="icon-bar"></span><span class="icon-bar"></span><span
							class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#">Brand</a>
				</div>

				<div class="collapse navbar-collapse"
					id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li class="active"><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li class="dropdown"><a href="#" class="dropdown-toggle"
							data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
							<ul class="dropdown-menu">
								<li><a href="#">Action</a></li>
								<li><a href="#">Another action</a></li>
								<li><a href="#">Something else here</a></li>
								<li class="divider"></li>
								<li><a href="#">Separated link</a></li>
								<li class="divider"></li>
								<li><a href="#">One more separated link</a></li>
							</ul></li>
					</ul>
					<form class="navbar-form navbar-left" role="search">
						<div class="form-group">
							<input type="text" class="form-control" />
						</div>
						<button type="submit" class="btn btn-default">Submit</button>
					</form>
					<ul class="nav navbar-nav navbar-right">
						<li><a href="#">Link</a></li>
						<li class="dropdown"><a href="#" class="dropdown-toggle"
							data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
							<ul class="dropdown-menu">
								<li><a href="#">Action</a></li>
								<li><a href="#">Another action</a></li>
								<li><a href="#">Something else here</a></li>
								<li class="divider"></li>
								<li><a href="#">Separated link</a></li>
							</ul></li>
					</ul>
				</div>

			</nav>
		</div>
	</div>
	<div class="row">
		<div class="col-md-2">
			<div class="sidebar-menu">
				<a href="#userMeun" class="nav-header menu-first collapsed"
					data-toggle="collapse"><i class="icon-user-md icon-large"></i>
					用户管理</a>
				<ul id="userMeun" class="nav nav-list collapse menu-second">
					<li><a href="#"><i class="icon-user"></i> 增加用户</a></li>
					<li><a href="#"><i class="icon-edit"></i> 修改用户</a></li>
					<li><a href="#"><i class="icon-trash"></i> 删除用户</a></li>
					<li><a href="#"><i class="icon-list"></i> 用户列表</a></li>

				</ul>
				<a href="#articleMenu" class="nav-header menu-first collapsed"
					data-toggle="collapse"><i class="icon-book icon-large"></i>
					文章管理</a>
				<ul id="articleMenu" class="nav nav-list collapse menu-second">
					<li><a href="#"><i class="icon-pencil"></i> 添加文章</a></li>
					<li><a href="#"><i class="icon-list-alt"></i> 文章列表</a></li>
				</ul>
			</div>
		</div>
		<div class="col-md-10"></div>
	</div>
</div>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</html>
